<template>
  <view class="card-container">
    <!-- 1. 新闻卡片（纯文字/单图模式） -->
    <view v-if="type === 'news'" class="card news-card">
      <view style="padding: 16px; height: auto; min-height: 100px;">
        <!-- 新闻标题+图片区域 -->
        <view style="display: flex; flex-direction: row; align-items: flex-start; gap: 12px; margin-bottom: 12px;">
          <!-- 单图显示（mode=2） -->
          <image 
            v-if="mode === 2"
            class="card-image" 
            :src="currentImageUrl" 
            @error="handleImageError"
            alt="新闻图片"
            mode="aspectFill"
          ></image>
          <!-- 新闻标题 -->
          <view class="title" :style="{ flex: mode === 2 ? '1' : 'auto' }">
            <text>{{ title }}</text>
          </view>
        </view>
        <!-- 新闻信息栏（置顶标签/来源/评论/时间） -->
        <view class="info-bar">
          <text v-if="isTop" class="top-tag">置顶</text>
          <text class="author">{{ author }}</text>
          <text class="comments">{{ comments }}评</text>
          <view style="flex: 1; display: flex; justify-content: flex-end;">
            <text class="time">{{ time }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 2. 多图广告卡片（mode=3，贴合PPT三图布局） -->
    <view v-else-if="type === 'ad' && mode === 3" class="card ad-card">
      <view class="ad-content">
        <!-- 广告标题 -->
        <view class="ad-title">{{ adTitle }}</view>
        
        <!-- 广告三图布局（均分宽度，保持比例） -->
        <view class="ad-images">
          <image 
            v-for="(img, idx) in displayImages" 
            :key="idx" 
            :src="img" 
            @error="handleAdImgError(idx)"
            class="ad-img"
            alt="广告图片"
            mode="aspectFill"
          ></image>
        </view>
        
        <!-- 广告信息栏（广告标签/来源/时间） -->
        <view class="ad-info">
          <text class="ad-tag">广告</text>
          <text class="ad-source">{{ adSource }}</text>
          <text class="ad-time">{{ adTime }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "MultiCard",
  data() {
    return {
      // 新闻图片状态（当前显示的图片路径）
      currentImageUrl: '',
      // 广告图片状态（存储三图路径，支持容错更新）
      displayImages: []
    };
  },
  props: {
    // 基础属性：区分卡片类型（新闻/news | 广告/ad）
    type: {
      type: String,
      default: 'news',
      validator: (val) => ['news', 'ad'].includes(val) // 仅允许两种类型
    },
    // 模式：1=纯文字新闻，2=单图新闻，3=多图广告
    mode: {
      type: Number,
      default: 1,
      validator: (val) => [1, 2, 3].includes(val) // 仅允许三种模式
    },

    // ---------------------- 新闻卡片专属属性 ----------------------
    title: { type: String, default: "新闻标题", required: true },
    isTop: { type: Boolean, default: false },
    author: { type: String, default: "来源", required: true },
    comments: { type: String, default: "0", required: true },
    time: { type: String, default: "2025.10.10" },
    imageSrc: { type: String, default: '' }, // 新闻单图路径
    defaultImage: { type: String, default: "/static/logo.png" }, // 新闻无图时默认图
    errorImage: { type: String, default: "/static/xw4.png" }, // 新闻图片加载失败备用图

    // ---------------------- 多图广告专属属性 ----------------------
    adTitle: { type: String, default: "广告标题" },
    adImages: { 
      type: Array, 
      default: () => [
        "/static/ad-default1.png",
        "/static/ad-default2.png",
        "/static/ad-default3.png"
      ] // 广告默认三图
    },
    adSource: { type: String, default: "广告来源" },
    adTime: { type: String, default: "2025.10.08 09:50" },
    adErrorImg: { type: String, default: "/static/logo.png" } // 广告图片加载失败备用图
  },

  computed: {
    // 新闻图片初始化：有图用图，无图用默认图
    initImageUrl() {
      return this.imageSrc ? this.imageSrc : this.defaultImage;
    },
    // 广告图片初始化：有图用图，无图用默认三图
    initAdImages() {
      return this.adImages.length > 0 ? this.adImages : [
        "/static/ad-default1.png",
        "/static/ad-default2.png",
        "/static/ad-default3.png"
      ];
    }
  },

  watch: {
    // 监听新闻图片初始化值，更新当前显示图
    initImageUrl: {
      handler(newVal) {
        this.currentImageUrl = newVal;
      },
      immediate: true // 初始化时立即执行
    },
    // 监听广告图片初始化值，更新三图显示
    initAdImages: {
      handler(newVal) {
        this.displayImages = [...newVal];
      },
      immediate: true // 初始化时立即执行
    }
  },

  methods: {
    // 新闻图片加载失败：替换为备用图
    handleImageError() {
      if (this.currentImageUrl !== this.errorImage) {
        this.currentImageUrl = this.errorImage;
      }
    },
    // 广告图片加载失败：指定索引替换为备用图（$set保证响应式）
    handleAdImgError(idx) {
      this.$set(this.displayImages, idx, this.adErrorImg);
    }
  }
};
</script>

<style scoped>
/* 公共卡片样式 */
.card-container {
  width: 100%;
}
.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* ---------------------- 新闻卡片样式 ---------------------- */
.news-card {
  margin: 10px 0;
}
.top-tag {
  display: inline-block;
  background-color: #ff4d4f;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 8px;
}
.title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
}
.info-bar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  color: #888;
  flex-wrap: wrap;
  gap: 12px;
}
.author {
  white-space: nowrap;
}
.comments {
  white-space: nowrap;
}
.time {
  font-size: 12px;
  color: #aaa;
}
.card-image {
  width: 120px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  overflow: hidden;
  flex-shrink: 0;
}

/* ---------------------- 多图广告卡片样式 ---------------------- */
.ad-card {
  margin: 10px 0;
  padding: 16px;
}
.ad-content {
  width: 100%;
}
.ad-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 12px;
  line-height: 1.4;
}
/* 三图均分布局 */
.ad-images {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  height: 100px; /* 固定高度，保证布局一致 */
}
.ad-img {
  flex: 1; /* 三图均分宽度 */
  height: 100%;
  border-radius: 4px;
  object-fit: cover;
  overflow: hidden;
}
.ad-info {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #888;
  gap: 12px;
}
.ad-tag {
  color: #ff7d00;
  padding: 1px 4px;
  border: 1px solid #ff7d00;
  border-radius: 2px;
  white-space: nowrap;
}
.ad-source {
  white-space: nowrap;
}
.ad-time {
  margin-left: auto; /* 右对齐时间 */
  color: #aaa;
}
</style>